<template>
  <div class="container">
    <div>
      <span style="width:50px;text-align:right"> {{value.rate}} {{value.unitBase}} /</span>
      <label style="width:25px;font-size:16px;text-align:center">{{value.unit}}</label>
    </div>
    <div>
      <van-stepper
      input-width="50px"
      button-size="32px"
      v-model="value.processQty"
      min="1"
      :max="value.maxQty"/>
      <div style="text-align:center;font-size:10px;color:gray;height:20px;">
        <span>加工后剩余：</span>
        <span style="width:30px;text-align:center;display:inline-block">{{(value.maxQty - value.processQty) * value.rate}}</span>
        <span>{{value.unitBase}}</span>
      </div>
    </div>
    <van-button type="info" @click="handlePack(value)">加工</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  props: {
    value: Object
  },
  created() {
  },
  computed: {

  },
  methods: {
    handlePack(val) {
      this.$emit('pack-click', val)
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    display:flex;
    justify-content:space-between;
    align-items:center
  }

</style>
